<template>
    <div @scroll.passive="getScroll($event)" style="height:760px;overflow:auto;">
        <div
            class="project-application-container"
            style="height: 30px;"
            v-if="pageFrom === 'courseStudy'"
        >
            <el-breadcrumb style="float: left;" separator="/">
                <el-breadcrumb-item :to="{ path: '/courseStudy' }">
                    <span @click="returnList">课程学习</span>
                </el-breadcrumb-item>
                <el-breadcrumb-item>
                    <span>查看</span>
                </el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-card>
            <el-button style="float:right" @click="returnList">返回</el-button>
            <span class="top-title">
                <h3>查看</h3>
            </span>
            <hr />
            <span class="top-title">
                <h4 style="margin-left:2%; width:80%">课程内容</h4>
            </span>
            <br />
            <div class="content">
                <el-input
                    v-model="fileName"
                    disabled
                    style="font-size: 18px;font-weight: 800;"
                > </el-input>
                <span v-show="loading">
                    <br />
                    <br />
                    正在加载中....
                </span>
                <div v-if="!dialogTableVisible"  >
                <el-button v-show="!loading" @click="openFullCream" style="position:absolute;right:5%" icon="el-icon-full-screen">全屏展示</el-button>
                <iframe
                    v-show="!loading"
                    :src="pdfUrl"
                    width="100%"
                    :height="DiaHeight"
                    frameborder="0"
                ></iframe>
                </div>
            </div>
        </el-card>
        
        <el-dialog title="全屏展示" :visible.sync="dialogTableVisible" :fullscreen='true' >
            <div @scroll.passive="getScroll($event)" style="height:760px;overflow:auto;">
                <iframe
                    v-show="!loading"
                    :src="pdfUrl"
                    width="100%"
                    :height="DiaHeight"
                    frameborder="0"
                ></iframe>
            </div>
        </el-dialog>
       
    </div>
</template>
<script>
import courseManageApi from 'common/src/api/academicBehaviorNorms/lessonManage/courseManage'
import axios from 'axios'
export default {
    data() {
        return {
            loading: false,
            shutDown: false,
            dialogTableVisible: false,
            DiaHeight:null,
            learningId: '',
            baseUrl: process.env.VIEW_PDF_URL,
            pdfUrl: '',
            percent: 0,
            loadRight: false
        }
    },
    props: {
        id: {
            type: String,
            default: ''
        },
        fileName: {
            type: String,
            default: ''
        },
        pageFrom: {
            type: String,
            default: ''
        },
        tabVal: {
            type: String,
            default: '0'
        }
    },
    async created() {
        this.loading = true
        this.percent = 0
        await this.getFile()
        if (this.pageFrom === 'courseStudy') {
            this.getLearningId()
        }
    },
    mounted() {},
    methods: {
        returnList() {
            this.shutDown = true
            this.$emit('returnVal', { val: 'list', tabVal: this.tabVal })
        },
        openFullCream() {
            this.dialogTableVisible = true
        },
        getLearningId() {
            courseManageApi.getDetail(this.id).then(res => {
                this.learningId = res.data.learningId
                this.percent = res.data.learningProgress
            })
        },
        async getFile() {
            let _this = this
            const resp = await courseManageApi.fileToByteArray(this.id)
            _this.loading = true
            if (resp.code === 200) {
                let data = {
                    originalFileName: resp.data.originalFileName,
                    content: resp.data.content
                }
                // 文件从obs转换到预览服务过程2：预览服务接收文件字节数组
                const response = await axios.post(window.location.origin + '/filePre/fileImport', data, {
                    headers: { 'X-Token': localStorage.getItem('sessionid') || '' }
                })
                if (response.data.code === 200) {
                    _this.pdfUrl =
                        window.location.origin +
                        '/filePre/onlinePreview?url=' +
                        window.location.origin +
                        '/filePre/demo/' +
                        resp.data.originalFileName
                    _this.alreadyOnLoad(resp.data.originalFileName)
                } else {
                    _this.loading = false
                }
            }
        },
        alreadyOnLoad(name) {
            // 获取预览文件页数
            if(this.shutDown) {
                return
            } else {
                setTimeout(() => {
                    axios.get(window.location.origin + '/filePre/getFileHeight?fileName=' + name).then(res => {
                        if (res.data && res.data.data) {
                            setTimeout(() => {
                            axios.get(window.location.origin + '/filePre/getFileHeight?fileName=' + name).then(resT => {
                                if(resT.data.data === res.data.data) {
                                        this.DiaHeight = res.data.data + 30 + 'px'
                                        this.loading = false
                                } else {
                                    this.alreadyOnLoad(name)
                                }
                            })
                            }, 2000)
                        } else {
                            this.alreadyOnLoad(name)
                        }
                    })
                }, 2000)
            }
            // 文件页数通过‘/onlinePreview’接口解析后生成的，并不确定什么时候解析完（直接调接口可能只能拿到解析了一半的页数）
            // 所以通过间隔2秒的延时轮询来判断解析是否完成
        },
         
        getScroll(event) {
            if (this.pageFrom === 'courseStudy') {
                // 滚动条距离底部的距离scrollBottom
                let per = 0
                if(event.target.scrollTop && event.target.scrollTop > 0) {
                    per = ((event.target.scrollTop + event.target.clientHeight) /
                        event.target.scrollHeight) *
                    100
                let scrollBottom =
                    event.target.scrollHeight - event.target.scrollTop - event.target.clientHeight

                }

                if (this.percent === 100) {
                    return
                } else {
                    // 滚动轴每滚动5%的距离  更新一次学习进度
                    if (per > this.percent && parseInt(per) % 5 === 0) {
                        this.percent = per
                        let parm = {
                            id: this.learningId,
                            progress: parseInt(per),
                            status: 1
                        }
                        clearTimeout(this.timer)
                        this.timer = setTimeout(function() {
                            // 切换为搜索
                            courseManageApi.updateLearningStatus(parm).then(res => {})
                        }, 500)
                    }
                }
            }
        }
    }
}
</script>
<style scoped lang="scss">
.content ::v-deep {
    width: 96%;
    margin-left: 2%;
    .el-input--small .el-input__inner {
        height: 45px;
        line-height: 45px;
        width: 100%;
    }
}
</style>